<!--
 * @Author: Bo
 * @Date: 2022-03-22 16:23:52
-->
<template>
  <div id="header">
    <div class="container">
      <div class="left-content">
        <ul class="tab-list">
          <router-link to="/" custom v-slot="{ navigate }">
            <li
              class="tab-item"
              @click="navigate"
              @keypress.enter="navigate"
              role="link"
            >
              首页
            </li>
          </router-link>
        </ul>
        <div class="header-title">FNIU 的博客</div>
      </div>

      <div class="search-box" @keyup.enter="jumpSearch">
        <el-input
          class="search-input"
          v-model="serachText"
          size="large"
          placeholder="请输入搜索内容"
          :suffix-icon="Search"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '../../router/router'
import { getType } from '../../api/api'
const serachText = ref('')

function jumpSearch() {
  router.push({
    name: 'Search',
    params: {
      searchText: serachText.value
    }
  })
}
// console.log(getCurrentInstance())
// getType().then((res: any) => {
//   console.log(res)
// })
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#header {
  height: 50px;
  border-bottom: 1px solid #eee;
  background: #fff;
  .container {
    position: relative;
    display: flex;
    width: 1000px;
    justify-content: space-between;
    align-content: center;
    margin: auto;
    height: 50px;
    line-height: 50px;
    font-size: 14px;

    .left-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .tab-list {
      min-width: 300px;
      .tab-item {
        position: relative;
        width: 40px;
        text-align: center;
        cursor: pointer;
      }
      .tab-item.active,
      .tab-item {
        &:after {
          content: '';
          position: absolute;
          height: 3px;
          width: 30px;
          background: chocolate;
          left: 50%;
          bottom: 0px;
          transform: translateX(-50%);
        }
      }
    }

    .search-input {
      .el-input__inner {
        width: 283px;
        border-radius: 20px;
      }
    }

    .header-title {
      padding: 0 20px;
      text-align: center;
      font-size: 20px;
      letter-spacing: 2px;
      font-family: fantasy;
      text-shadow: 5px 5px 5px #ccc;
      margin-right: 16px;
    }
  }
}
</style>
